import React, { useEffect, useState } from 'react'
import { PageHeader } from '@ant-design/pro-layout'//需要安装@ant-design/pro-components，可以参考antd官网
import { Descriptions } from 'antd'
import axios from 'axios'
import moment from 'moment'


function NewsPreview(props) {
    const [newsInfo, setnewsInfo] = useState(null)
    useEffect(() => {
        // console.log(props.match.params.id);
        axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then((res) => {
            setnewsInfo(res.data);
            // console.log(res.data);
        })
    }, [props.match.params.id])

    const auditList = ["未审核", "审核中", "已通过", "未通过"];
    const publishList = ["未发布", "待发布", "已上线", "已下线"];
    const colorList = ["orange","skyblue","green","red"]
    return (
        <div>
            {
                newsInfo && <div>
                    <PageHeader
                        title={newsInfo?.title}
                        subTitle={newsInfo.category.title}
                        onBack={() => window.history.back()}
                    >

                        <Descriptions size='small' column={3}>
                            <Descriptions.Item label="创建者">{newsInfo.author}</Descriptions.Item>
                            <Descriptions.Item label="创建时间">{moment(newsInfo.createTime).format("YYYY/MM/DD HH:mm:ss")}</Descriptions.Item>{/**需要下载moment */}
                            <Descriptions.Item label="发布时间">{
                                newsInfo.publishTime ? moment(newsInfo.publishTime).format("YYYY/MM/DD HH:mm:ss") : "-"
                            }</Descriptions.Item>
                            <Descriptions.Item label="区域">{newsInfo.region}</Descriptions.Item>
                            <Descriptions.Item label="审核状态"><span style={{ color:colorList[newsInfo.auditState] }}>{
                                auditList[newsInfo.auditState]
                            }
                            </span></Descriptions.Item>
                            <Descriptions.Item label="发布状态"><span style={{ color:colorList[newsInfo.publishState] }}>{
                                publishList[newsInfo.publishState]
                            }</span></Descriptions.Item>
                            <Descriptions.Item label="访问数量"><span style={{ color: "#99CC00" }}>{newsInfo.view}</span></Descriptions.Item>
                            <Descriptions.Item label="点赞数量"><span style={{ color: "#99CC00" }}>{newsInfo.star}</span></Descriptions.Item>
                            <Descriptions.Item label="评论数量"><span style={{ color: "#99CC00" }}>0</span></Descriptions.Item>
                        </Descriptions>

                    </PageHeader>

                    <div
                    dangerouslySetInnerHTML={{__html:newsInfo.content}}
                    style={{
                        height:"100%",
                        padding:"15px 10px",
                        marginTop:"20px",
                        border:"1px solid #ccc",
                        borderRadius:"6px"
                    }}
                    >

                    </div>
                </div>
            }
        </div>
    )
}

export default NewsPreview